<template>
    <div class="search" :style="backgroundStyle">
        <div class="search-container">
            <el-input placeholder="请输入内容" v-model="searchQuery" class="search-input" @keyup.enter="onSearch">
                <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
            </el-input>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            searchQuery: '',
            backgroundStyle: {
                backgroundImage: `url(${require('https://img2.baidu.com/it/u=3197467869,532000398&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500')})`, // 或者使用静态图片如 'your-static-image.jpg'
                backgroundSize: 'cover',
                height: '100vh',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                position: 'relative'
            }
        }
    },
    methods: {
        onSearch() {
            console.log(`Searching for: ${this.searchQuery}`);
            // 这里可以添加搜索逻辑
        },
        goToUserCenter() {
            console.log('Going to user center');
            // 跳转到个人中心逻辑
        }
    }
}
</script>

<style scoped>
.search-container {
    width: 60%;
    max-width: 600px;
}

.search-input {
    font-size: 20px;
}

.user-center {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
</style>